<template>
  <div class="container">
    <h3>(共{{ iconList.length }}个图标)</h3>
    <div class="search-box">
      <el-input class="search" size="large" v-model="keyword" clearable placeholder="请输入图标名称"></el-input>
    </div>

    <ul class="flex flex-wrap px-2 ml-2">
      <li class="icon-li" v-for="(item,index) in list" :key="index" :title="item" @click="onChangeIcon(item)">
        <div class="icon-li-content">
          <el-icon>
            <component :is="item" :title="item"></component>
          </el-icon>
        </div>
      </li>
    </ul>
  </div>

  <!-- 分页 start -->
  <el-pagination
  small
  :total="iconList.length"
  :page-size="pageSize"
  :current-page="currentPage"
  background
  layout="prev,pager,next"
  @current-change="onCurrentChange">
  </el-pagination>
  <!-- 分页 end -->
</template>

<script setup lang="ts">
import { ref,computed } from "vue";

// 定义事件
const emit = defineEmits(['onChangeIcon']);
const iconList:Array<string> = ref<any>([
    'Plus',
    'Minus',
    'CirclePlus',
    'Search',
    'Female',
    'Male',
    'Aim',
    'House',
    'FullScreen',
    'Loading',
    'Link',
    'Service',
    'Pointer',
    'Star',
    'Notification',
    'Connection',
    'ChatDotRound',
    'Setting',
    'Clock',
    'Position',
    'Discount',
    'Odometer',
    'ChatSquare',
    'ChatRound',
    'ChatLineRound',
    'ChatLineSquare',
    'ChatDotSquare',
    'View',
    'Hide',
    'Unlock',
    'Lock',
    'RefreshRight',
    'RefreshLeft',
    'Refresh',
    'Bell',
    'MuteNotification',
    'User',
    'Check',
    'CircleCheck',
    'Warning',
    'CircleClose',
    'Close',
    'PieChart',
    'More',
    'Compass',
    'Filter',
    'Switch',
    'Select',
    'SemiSelect',
    'CloseBold',
    'EditPen',
    'Edit',
    'Message',
    'MessageBox',
    'TurnOff',
    'Finished',
    'Delete',
    'Crop',
    'SwitchButton',
    'Operation',
    'Open',
    'Remove',
    'ZoomOut',
    'ZoomIn',
    'InfoFilled',
    'CircleCheckFilled',
    'SuccessFilled',
    'WarningFilled',
    'CircleCloseFilled',
    'QuestionFilled',
    'WarnTriangleFilled',
    'UserFilled',
    'MoreFilled',
    'Tools',
    'HomeFilled',
    'Menu',
    'UploadFilled',
    'Avatar',
    'HelpFilled',
    'Share',
    'StarFilled',
    'Comment',
    'Histogram',
    'Grid',
    'Promotion',
    'DeleteFilled',
    'RemoveFilled',
    'CirclePlusFilled',
    'ArrowLeft',
    'ArrowUp',
    'ArrowRight',
    'ArrowDown',
    'ArrowLeftBold',
    'ArrowUpBold',
    'ArrowRightBold',
    'ArrowDownBold',
    'DArrowRight',
    'DArrowLeft',
    'Download',
    'Upload',
    'Top',
    'Bottom',
    'Back',
    'Right',
    'TopRight',
    'TopLeft',
    'BottomRight',
    'BottomLeft',
    'Sort',
    'SortUp',
    'SortDown',
    'Rank',
    'CaretLeft',
    'CaretTop',
    'CaretRight',
    'CaretBottom',
    'DCaret',
    'Expand',
    'Fold',

    'DocumentAdd',
    'Document',
    'Notebook',
    'Tickets',
    'Memo',
    'Collection',
    'Postcard',
    'ScaleToOriginal',
    'SetUp',
    'DocumentDelete',
    'DocumentChecked',
    'DataBoard',
    'DataAnalysis',
    'CopyDocument',
    'FolderChecked',
    'Files',
    'Folder',
    'FolderDelete',
    'FolderRemove',
    'FolderOpened',
    'DocumentCopy',
    'DocumentRemove',
    'FolderAdd',
    'FirstAidKit',
    'Reading',
    'DataLine',
    'Management',
    'Checked',
    'Ticket',
    'Failed',
    'TrendCharts',
    'List'
]);

// 每页显示行数
const pageSize = ref(20);
// 当前页面
const currentPage = ref(1);
// 关键词
const keyword = ref('');
// 计算属性
const list = computed(() => {
  if (currentPage.value === 1) {
    return iconList.value.filter(item => {
      return item.indexOf(keyword.value) !== -1
    }).slice(currentPage.value - 1,pageSize.value)
  } else {
    return iconList.value.filter(v => v.indexOf(keyword.value)).slice(
        pageSize.value * (currentPage.value - 1),
        pageSize.value * (currentPage.value - 1) + pageSize.value
    )
  }
});

const onChangeIcon = (item: any) => {
  emit('onChangeIcon',item);
}

const onCurrentChange = (page: number) => {
  currentPage.value = page;
}


</script>

<style scoped>
.search-box {
  text-align: center;
  margin-top: 10px;
}

.search {
  width: 300px;
}

ul,
li {
  list-style: none;
}

.icon-li {
  display: inline-block;
  padding: 10px;
  width: 30px;
  height: 30px;
  border-style: solid;
  border-width: 1px;
  margin-top: 0.25rem;
  margin-right: 0.5rem;
}

.icon-li-content {
  display: flex;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.icon-li-content i {
  font-size: 26px;
  color: #606266;
}

.icon-li-content span {
  margin-top: 10px;
  color: #787878;
}

.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex {
  display: flex;
}

.ml-2 {
  margin-left: 0.5rem;
}

.el-pagination {
  margin-top: 20px;
  justify-content: center;
}

:deep(.el-pagination.is-background .el-pager li:not(.is-disabled).is-active) {
  background-color: #e99d53;
}



</style>